<template>
  <nav>
    <div class="logo">
      <img
        src="./img/logo.png"
        alt=""
      >
    </div>
    <div
      v-for="(item,index) in top"
      :key="index"
      class="menu-item"
      @click="changeRouter(item.id)"
    >
      {{ item.title }}
    </div>
    <div
      class="userinfo"
      @click="gotoself"
    >
      我的
    </div>
  </nav>
</template>

<script>
export default {
  name:'Headnav',
  data() {
    return {
      top: [
        { id: 1, title: '主页' },
        { id: 2, title: '热榜' },
        { id: 3, title: '动漫' },
        { id: 4, title: '游戏' },
        { id: 5, title: '杂谈' },
        { id: 6, title: '排行榜' },
        { id: 7, title: '会员购' }
      ],
      showDialog: false
    }
  },
  methods: {
    changeRouter(id) {
      if(id === 1) {
        this.$router.push({ path:'/main' })
      } else if(id === 2) {
        this.$router.push({ path:'/hotlist' })
      } else if(id === 3) {
        this.$router.push({ path:'/carton' })
      } else if(id === 4) {
        this.$router.push({ path:'/games' })
      } else if(id === 5) {
        this.$router.push({ path:'/tattle' })
      } else if(id === 6) {
        this.$router.push({ path:'/rank' })
      } else if(id === 7) {
        this.$router.push({ path:'/shopping' })
      }
    },
    gotoself() {
      this.$router.push({ path:'/self' })
    }
  }
}
</script>

<style lang="scss" scoped>
nav {
  display: flex;
  align-items: center;
}
.menu-item {
//   color: #FFFFFF;
  width: 180px;
  position: relative;
  text-align: center;
  cursor: pointer;
  border-bottom: transparent;
  transition: 0.4s;
  font-size: larger;
  font-weight: bold;
}
.menu-item:hover {
  background-color: darkgray;
  border-bottom: solid 6px;
  border-bottom-color: brown;
  height: 100px;
}
.logo {
    width: 100px;
    height: 100px;
}

.userinfo {
  text-align: center;
  width: 180px;
  cursor: pointer;
  transition: 0.4s;
  font-size: larger;
  font-weight: bold;
}
.userinfo:hover {
  background-color: darkgray;
  border-bottom: solid 6px;
  border-bottom-color: brown;
  height: 100px;
}
</style>
